<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <!-- 引入偏爱图标 -->
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    </link>
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <!-- 引入自定义样式-->
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <main class="container clearfix">
        <!-- 左侧个人简介 -->
        <aside class="profile">
            <img src="./images/m1.jpg" alt="头像">
            <p class="name">新中地</p>
            <p class="job">GIS开发工程师</p>
            <!-- 小图标 -->
            <div class="icon">
                <a class="iconfont icon-github"></a>
                <a class="iconfont icon-weibo"></a>
                <a class="iconfont icon-iconfontweixin"></a>
                <a class="iconfont icon-QQ"></a>
            </div>
            <a class="btn" href="#">联系我</a>

        </aside>
        <!-- 右侧详细信息 -->
        <aside class="infomation">
            <!-- 个人介绍 -->
            <section class="introduce">
                <h2>个人介绍</h2>
                <p class="gray">
                    张三，Web前端工程师，现就职于某公司，负责Web前端开发工作。张三，Web前端工程师，现就职于某公司，负责Web前端开发工作。张三，Web前端工程师，现就职于某公司，负责Web前端开发工作。
                </p>
                <p class="gray">
                    2018年9月，毕业于某大学，获得计算机科学与技术专业学士学位。张三，Web前端工程师，现就职于某公司，负责Web前端开发工作。张三，Web前端工程师，现就职于某公司，负责Web前端开发工作。
                </p>
                <div class="frame">
                    <div class="box">
                        <div>
                            <span class="gray">年龄：</span>
                            <span class="black">22</span>
                        </div>
                        <div>
                            <span class="gray">住址：</span>
                            <span class="black">北京市海淀区</span>
                        </div>
                        <div>
                            <span class="gray">手机号：</span>
                            <span class="black">13812345678</span>
                        </div>
                        <div>
                            <span class="gray">Email：</span>
                            <span class="black">Xzd@163.com</span>
                        </div>
                    </div>
                    <div class="box">
                        <div>
                            <span class="gray">岗位：</span>
                            <span class="black">Web前端工程师</span>
                        </div>
                        <div>
                            <span class="gray">外语：</span>
                            <span class="black">英语六级</span>
                        </div>
                        <div>
                            <span class="gray">工作经验：</span>
                            <span class="black">1年</span>
                        </div>
                        <div>
                            <span class="gray">到港时间：</span>
                            <span class="black">随时</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 技术栈 -->
            <section class="techstack">
                <h2>技术栈</h2>
                <div class="tech">
                    <div>
                        <img src="./images/icon-1.png" alt="">
                        <span>HTML5</span>
                    </div>
                    <div>
                        <img src="./images/icon-2.png" alt="">
                        <span>CSS3</span>
                    </div>
                    <div>
                        <img src="./images/icon-3.png" alt="">
                        <span>JavaScript</span>
                    </div>
                    <div>
                        <img src="./images/icon-4.png" alt="">
                        <span>SASS</span>
                    </div>
                    <div>
                        <img src="./images/icon-5.png" alt="">
                        <span>JQuery</span>
                    </div>
                    <div>
                        <img src="./images/icon-6.png" alt="">
                        <span>ReactJs</span>
                    </div>
                </div>
            </section>

            <!-- 技术熟练度 -->
            <section class="techlevel">
                <h2>技术熟练度</h2>
                <div class="frame">
                    <div class="lefts1">
                        <div class="box">
                            <div class="top">
                                <span class="left">html</span>
                                <span class="right">95%</span>
                            </div>
                            <div class="progress">
                                <div class="html"></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top">
                                <span class="left">Css</span>
                                <span class="right">80%</span>
                            </div>
                            <div class="progress">
                                <div class="css"></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top">
                                <span class="left">JavaScript</span>
                                <span class="right">65%</span>
                            </div>
                            <div class="progress">
                                <div class="JavaScript"></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top">
                                <span class="left">PhotoShop</span>
                                <span class="right">70%</span>
                            </div>
                            <div class="progress">
                                <div class="PhotoShop"></div>
                            </div>
                        </div>
                    </div>
                    <div class="lefts1">
                        <div class="box">
                            <div class="top">
                                <span class="left">JQuery</span>
                                <span class="right">90%</span>
                            </div>
                            <div class="progress">
                                <div class="JQuery"></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top">
                                <span class="left">React</span>
                                <span class="right">75%</span>
                            </div>
                            <div class="progress">
                                <div class="React"></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top">
                                <span class="left">Vue</span>
                                <span class="right">65%</span>
                            </div>
                            <div class="progress">
                                <div class="Vue"></div>
                            </div>
                        </div>
                        <div class="box">
                            <div class="top">
                                <span class="left">SmallApp</span>
                                <span class="right">70%</span>
                            </div>
                            <div class="progress">
                                <div class="SmallApp"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 学习工作区域 -->
            <section class="work">
                <h2>学习工作区域</h2>
                <div class="frame">
                    <div class="work1">
                        <p class="time">2018-2022</p>
                        <p class="school">武汉大学计算机专业</p>
                        <p class="major">在武汉大学计算机专业学习，获得计算机科学与技术专业学士学位，并在此基础上深造，获得计算机软件工程师、Web前端工程师等职称。</p>
                    </div>
                    <div class="work1">
                        <p class="time">2021-2022</p>
                        <p class="school">字节跳动 飞书项目组 前端实习生</p>
                        <p class="major">2021年10月-2022年3月，在飞书项目组前端实习生，负责飞书PC端、移动端、小程序、RN、Flutter、uni-app等前端项目的研发工作。</p>
                    </div>
                </div>
            </section>

            <!-- 联系方式 -->
            <section class="contact">
                <h2>联系方式</h2>
                <div class="frame">
                    <div class="box">
                        <div class="icon"><span class="iconfont icon-a-texteditorpastetext-line"></span></div>
                        <div>
                            <p class="strong">详细地址</p>
                            <p class="gray">武汉市洪山区软件园</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="icon"><span class="iconfont icon-a-texteditorpastetext-line"></span></div>
                        <div>
                            <p class="strong">手机号</p>
                            <p class="gray">13812345678</p>
                        </div>
                    </div>
                    <div class="box">
                        <div class="icon"><span class="iconfont icon-a-texteditorpastetext-line"></span></div>
                        <div>
                            <p class="strong"> Email</p>
                            <p class="gray">Xzd@163.com</p>
                        </div>
                    </div>
                </div>
            </section>

        </aside>
    </main>
</body>

</html>